<!-- 为解决row-key导致的多选框点击后总按钮显示问题，加入isSetRowKey判断，列表若有层级，父组件需传isSetRowKey，以及row-key -->
<template>
  <div v-loading="loading" style="height: 100%; width: 100%">
    <el-table
      ref="HTable"
      :data="tableData"
      :border="true"
      :max-height="height"
      :default-sort="defaultSort"
      @selection-change="handleSelectionChange"
      stripe
      style="width: 100%"
      :header-cell-style="{
        background: '#F5F5F5',
        color: '#333',
      }"
    >
      <el-table-column
        v-if="selectable"
        type="selection"
        width="55"
        fixed="left"
        :resizable="false"
      >
      </el-table-column>
      <el-table-column
        v-if="orderable"
        label="序号"
        type="index"
        width="50"
        align="center"
        fixed="left"
        :resizable="false"
      >
      </el-table-column>
      <el-table-column
        v-for="(col, index) in columnConfigs"
        :key="index"
        :prop="col.prop"
        :width="col.width"
        :minwidth="col.minwidth"
        :label="col.label"
        :fixed="col.fixed"
        :sortable="col.sortable"
        :sort-method="sortfn"
        align="center"
        :resizable="true"
        :show-overflow-tooltip="col.tipable ? true : false"
      >
        <template slot-scope="scope">
          <template v-if="col.slot"
            ><slot :row="{ name: col.slot, row: scope.row, col: col }"></slot>
          </template>
          <template v-else>
            {{
              scope.row[col.prop] && scope.row[col.prop].length > 2000
                ? scope.row[col.prop].substr(0, 300) + "..."
                : scope.row[col.prop]
            }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pageflag"
      class="page"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.pageNum"
      :page-sizes="pages.pageSizes"
      :page-size="pages.pageSize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="pages.total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "HTable",
  props: {
    tableData: {
      type: Array,
      default: () => {},
    },
    columnConfigs: {
      type: Array,
      default: () => [],
    },
    pages: {
      type: Object,
      default: () => {},
    },
    pageflag: {
      type: Boolean,
      default: true,
    },
    selectable: {
      type: Boolean,
      default: true,
    },
    orderable: {
      type: Boolean,
      default: false,
    },
    height: {
      type: Number,
      default: null,
    },
    defaultSort: {
      type: Object,
      default: () => {},
    },
    // 1.主动和被动方式进行风险数据的采集，主要采集
    // 用户身份风险
    // 资产账号变更信息
    // 资产端口开放情况
    // 异常用户行为 等安全事件
    // 2.应支持基于风险数据构建风险数据库,包括
    // 风险基本信息
    // 风险来源
    // 风险权重
    // 风险分值
    // 为身份风险分析提供基本描述数据
    //
    // },
    // data: {
    //   type: Array,
    //   default: () => [],
    // },
    // field: {
    //   type: Array,
    //   default: () => [
    //     /*  {
    //         key:'',
    //         prop:'',
    //         label:''
    //       }*/
    //   ],
    // },
    // height: {
    //   type: String,
    //   default: "100%",
    // },
    // treeProps: {
    //   type: Object,
    // },
    // rowKey: {
    //   type: String || Function,
    // },
    // isSetRowKey: {
    //   type: Boolean,
    //   default: () => false,
    // },
    // isInputTable: {
    //   type: Boolean,
    //   default: () => false,
    // }, // 是否是输入型表格
    // defaultSort: {
    //   type: Object,
    // },
    // border: {
    //   type: Boolean,
    //   default: () => false,
    // },
    // spanMethod: {
    //   type: Function,
    // },
  },
  data() {
    return {
      loading: false,
      currentPage: 1, //当前页码
      pageSize: 10, //每页显示的条数
      pageTotal: 10, //总条数
    };
  },
  computed: {
    // dataKey() {
    //   return this.isInputTable ? null : JSON.stringify(this.data);
    // },
    // tableField: function () {
    //   let tableField = this.field || [];
    //   if (tableField && tableField instanceof Array) {
    //     return tableField.reduce((r, c) => {
    //       if (c.type === "selection") {
    //         r.push(c);
    //       } else {
    //         // 解决带.的key数据不展示问题
    //         r.push({
    //           ...c,
    //           prop: c.prop ? c.prop.replaceAll(/\./g, "__") : c.prop,
    //         });
    //       }
    //       return r;
    //     }, []);
    //   } else {
    //     return [];
    //   }
    // },
    // tableData: function () {
    //   let tableData = this.data || [];
    //   if (tableData && tableData instanceof Array) {
    //     if (tableData.length) {
    //       let keys = Object.keys(tableData[0]).filter((key) => /\./g.test(key));
    //       if (keys.length) {
    //         return tableData.reduce((r, c) => {
    //           let result = {
    //             ...c,
    //           };
    //           keys.forEach((key) => {
    //             let newKey = key.replaceAll(/\./g, "__");
    //             result[newKey] = c[key];
    //           });
    //           r.push(result);
    //           return r;
    //         }, []);
    //       } else {
    //         return tableData;
    //       }
    //     } else {
    //       return tableData;
    //     }
    //   } else {
    //     return [];
    //   }
    // },
  },
  activated() {
    // this.loading = true
    // setTimeout(() => {
    //   this.loading = false
    // }, 1000);
  },
  watch: {
    // data: function () {
    //   this.handleSelection();
    // },
  },
  created() {
    //console.log(169);
  },
  methods: {
    sortfn(a, b) {
      console.log(a.total,b.total,b.total-a.total);
      return b.total-a.total;
    },
    handleSizeChange(val) {
      // this.pageSize = val;
      // // this.getlists();
      // this.$parent.getlists()
      this.$emit("size-change", val);
      //代码逻辑
    },
    handleCurrentChange(val) {
      // this.currentPage = val;
      // this.$parent.getlists()
      // console.log("当前页" + val);
      this.$emit("page-change", val);
      // this.getlists();
      //代码逻辑
    },
    refresh() {
      this.$emit("refresh");
    },
    resetForm() {
      this.$emit("resetForm");
    },
    handleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
    clearSelection() {
      this.$refs.HTable.clearSelection();
    },
    // handleSelection() {
    //   if (this.$slots.default && this.$slots.default instanceof Array) {
    //     // 存在子元素
    //     let selection = this.$slots.default.find((node) => {
    //       return node.componentOptions?.propsData?.type === "selection";
    //     });

    //     if (selection) {
    //       // 存在复选框

    //       this.$nextTick(() => {
    //         // 数据变化之后重置复选框绑定的数据
    //         let selection = this.$refs.table.selection;
    //         this.$emit("selection-change", selection);
    //       });
    //     } else {
    //       // 不存在复选框
    //     }
    //   }
    // },
    // getRowKey(row) {
    //   return row[this.rowKey];
    // },
    // selectData(val, row) {
    //   this.$emit("select", { list: val, data: row });
    // },
    // cellClick(row, column, cell, event) {
    //   this.$emit("cell-click", {
    //     row,
    //     column,
    //     cell,
    //     event,
    //   });
    // },
    // sortChange(column, prop, order) {
    //   this.$emit("sort-change", column);
    // },
  },
};
</script>

<style scoped lang="scss">
.commonForm {
  display: flex;
  flex-wrap: wrap;
  // border: 1px solid #e5e5e5;

  ::v-deep .el-form-item {
    width: 33.33%;

    .el-form-item__label {
      padding-right: 0;
    }

    .el-form-item__content {
      padding-right: 8px;

      .el-select {
        width: 100%;
      }
    }
  }
}

::v-deep .page {
  margin-top: 10px;
  padding-right: 0;
  text-align: right;
  height: 48px;

  .el-pagination__sizes {
    margin-right: 0;

    .el-input--mini {
      margin-right: 0;
    }
  }
}

.global-common-table {
  position: relative;
  /*border: 1px solid #eee;*/
  /*border-bottom: 0;*/
  /*height: calc(100% - 18px);*/
  margin-top: 0 !important;
}

::v-deep .global-common-table-header-cell {
  font-size: 14px;

  color: #909399;

  .cell {
    /*font-weight: bolder!important;*/
  }
}

::v-deep .global-common-table-cell {
  font-size: 14px;
}

.table-tooltip {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .icon-wushuju {
    font-size: 40px;
    line-height: 40px;
  }

  .tip-content {
    line-height: 32px;
  }
}

::v-deep .el-table__body {
  // 使表格兼容safari，不错位
  width: 100%;
  table-layout: fixed !important;
}
</style>
